new Vue({
	el: '#mynetwork',
	data: {
		nodes: '',
		edges: '',
		container: null,
		data: '',
		options: null,
	},
	methods: {
		getNodesAndEdges() {
			var _this = this;
			$.ajax({
				url: 'getnodesedges',
				type: 'get',
				success: function(ret){
					console.log(ret);
					_this.nodes = ret.nodes;
					_this.edges = ret.edges;
					_this.init();
				},
				error: function(){
					alert('获取节点和关系失败');
				}
			})
		},

		init() {
			var _this = this;
			// _this.nodes = new vis.DataSet(_this.nodes);
			// _this.edges = new vis.DataSet(_this.edges);
			_this.container = document.getElementById('mynetwork');
			_this.data = {
				nodes: _this.nodes,
				edges: _this.edges
			};
			_this.options = {
				autoResize: true,
				groups: {
					useDefaultGroups: true,
					myGroupId: {
						/*node options*/
					}
				},
				nodes: {
					shape: 'dot',
					size: 30,
					font: {
						size: 32,
					},
					borderWidth: 2
				},
				edges: {
					width: 2,
					smooth: {  //设置两个节点之前的连线的状态
						enabled: false  //默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
					}
				},
				physics: { //计算节点之前斥力，进行自动排列的属性
					enabled: true, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
					barnesHut: {
						gravitationalConstant: -4000,
						centralGravity: 0.3,
						springLength: 120,
						springConstant: 0.04,
						damping: 0.09,
						avoidOverlap: 0
					}
				},
				interaction: {
					hover: true,
					dragNodes: true, //是否能拖动节点
					dragView: true, //是否能拖动画布
					hover: true, //鼠标移过后加粗该节点和连接线
					multiselect: true, //按 ctrl 多选
					selectable: true, //是否可以点击选择
					selectConnectedEdges: true, //选择节点后是否显示连接线
					hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
					zoomView: true //是否能缩放画布
				},
				manipulation: {  //该属性表示可以编辑，出现编辑操作按钮
					enabled: true
				}
			};
			_this.network = new vis.Network(_this.container, _this.data, _this.options);
		},

		resetAllNodes() {
			var _this = this;
			_this.nodes.clear();
			_this.edges.clear();
			_this.nodes.add(_this.nodesArray);
			_this.edges.add(_this.edgesArray);
			_this.data = {
				nodes: _this.nodes,
				edges: _this.edges
			};
			_this.network = new Vis.Network(_this.container, _this.data, _this.options);
		},

		resetAllNodesStabilize() {
			var _this = this;
			_this.resetAllNodes();
			_this.network.stabilize();
		}
	},


	mounted() {
		this.getNodesAndEdges();
		// this.network.on("click", function (params) {
		// 	params.event = "[original event]";
		// 	document.getElementById('mynetwork').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
		// 	console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
		// });
	}
})